import { useState } from "react";
import loginStyle from "./login.module.scss";
import { Select, Button, Space, Input } from "antd";
import regionListJson from "./region.json";
import { LoginAPI } from "@/request/api";
import { setRefreshToken, setToken } from "@/store/token";
import {message} from "antd";
const defineRegion = {
	id: 1,
	country_code: "86",
	cname: "中国大陆"
};
function Login() {
	const regionOptions = regionListJson.map((item) => {
		return {
			...item,
			value: item.id,
			label: "+" + item.country_code
		};
	});
	const [signInMethod, setSignInMethod] = useState("password");
	const [passForm, setPassForm] = useState({
		account: "",
		password: ""
	});
	const accountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		setPassForm({
			...passForm,
			account: e.target.value
		});
	};
	const passwordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		setPassForm({
			...passForm,
			password: e.target.value
		});
	};
	const [smsForm, setSmsForm] = useState({
		phone: "",
		code: "",
		country_id: defineRegion.id
	});
	const phoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		setSmsForm({
			...smsForm,
			phone: e.target.value
		});
	};
	// 地区选择
	const regionChange = (value: number) => {
		setSmsForm({
			...smsForm,
			country_id: value
		});
	};
	const codeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		setSmsForm({
			...smsForm,
			code: e.target.value
		});
	};
	const passwordLogin = (
		e: React.MouseEvent<HTMLButtonElement, MouseEvent>
	) => {
		//密码登录
		e.preventDefault();
		console.log("密码登录", passForm);
		LoginAPI(passForm)
			.then((res) => {
				console.log(res);
				setToken(res.access_token);
				setRefreshToken(res.refresh_token);
				message.open({
					type: 'success',
					content: '登录成功',
				  });
			})
			.catch((err) => {
				console.log(err);
				message.open({
					type: 'error',
					content: err ?? '登录失败',
				  });
			});
	};
	const smsLogin = () => {
		//短信登录
		console.log("短信登录", smsForm);
	};
	const enroll = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
		//注册
		console.log("注册");
		e.preventDefault();
		setSignInMethod("sms");
	};
	return (
		<div className={loginStyle.loginBox}>
			<h2>
				<Button
					type="link"
					className={signInMethod === "password" ? loginStyle.active : ""}
					onClick={() => setSignInMethod("password")}
				>
					密码登录
				</Button>
				<b>|</b>
				<Button
					type="link"
					className={signInMethod === "sms" ? loginStyle.active : ""}
					onClick={() => setSignInMethod("sms")}
				>
					短信登录
				</Button>
			</h2>
			<form
				className={`${loginStyle.passwordLoginForm} ${signInMethod === "password" ? loginStyle.active : ""}`}
			>
				<div className={loginStyle.userBox}>
					<Input
						type="text"
						name=""
						value={passForm.account}
						onChange={accountChange}
						required={true}
					/>
					<label>用户名</label>
				</div>
				<div className={loginStyle.userBox}>
					<Input
						type="password"
						name=""
						value={passForm.password}
						onChange={passwordChange}
						required={true}
					/>
					<label>密码</label>
				</div>
				<div className={`${loginStyle.userBox} ${loginStyle.buttonBox}`}>
					<Button type="primary" onClick={passwordLogin}>
						登录
					</Button>
					<Button onClick={enroll}>注册</Button>
				</div>
			</form>
			<form
				className={`${loginStyle.messageLoginForm} ${signInMethod === "sms" ? loginStyle.active : ""}`}
			>
				<div className={loginStyle.userBox}>
					<Input
						type="phone"
						name=""
						value={smsForm.phone}
						onChange={phoneChange}
						required={true}
					/>
					<label>手机号</label>
					<Select
						defaultValue={defineRegion.id}
						className={loginStyle.regionSelection}
						onChange={regionChange}
						options={regionOptions}
						popupMatchSelectWidth={false}
						optionRender={(option) => (
							<Space className={loginStyle.space}>
								<span role="img" aria-label={option.data.cname}>
									{option.data.cname}
								</span>
								<span role="img" aria-label={option.data.label}>
									{option.data.label}
								</span>
							</Space>
						)}
					/>
				</div>
				<div className={loginStyle.userBox}>
					<Input
						type="code"
						name=""
						value={smsForm.code}
						onChange={codeChange}
						required={true}
					/>
					<label>验证码</label>
					<Button className={loginStyle.obtainVerificationCode}>
						获取验证码
					</Button>
				</div>
				<div className={`${loginStyle.userBox} ${loginStyle.buttonBox}`}>
					<Button onClick={smsLogin}>登录/注册</Button>
				</div>
			</form>
		</div>
	);
}

export default Login;
